<template>
  <div class="home">
    <el-container style="height: 100%">
      <!-- <div class="ibps-layout-header-aside-menu-side"> -->
      <!--  -->

      <!-- ==========================退出登录提示========================== -->
      <el-dialog title="个人信息" :visible.sync="userInfoVisible" width="23%">
        <div>
          <span class="user-label">账户名称</span>
          <span>{{ account }}</span>
        </div>
        <div>
          <span class="user-label">用户名</span>
          <span>{{
            storage("nickname") == "null" ? "未填写" : storage("nickname")
          }}</span>
        </div>
        <div class="d-start">
          <span class="user-label" style="flex-shrink: 0">单位名称</span>
          <span
            class="nowrap"
            :title="
              storage('unit') == 'null' || storage('unit') == ' '
                ? '未填写'
                : storage('unit')
            "
            >{{
              storage("unit") == "null" || storage("unit") == " "
                ? "未填写"
                : storage("unit")
            }}</span
          >
        </div>
        <div>
          <span class="user-label">电话</span>
          <span>{{
            storage("phone") == "null" ? "未填写" : storage("phone")
          }}</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="userInfoVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <!-- ==========================退出登录提示========================== -->

      <!-- ==========================退出登录提示========================== -->
      <el-dialog title="退出登录" :visible.sync="logoutVisible" width="30%">
        <span>确定退出登录?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="logoutVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              logoutVisible = false;
              logout();
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- ==========================退出登录提示========================== -->

      <!-- ==========================修改密码弹窗========================== -->

      <el-dialog
        title="修改密码"
        :visible.sync="rePasswordVisible"
        width="30%"
        :destroy-on-close="true"
        :before-close="rePasswordDialogClose"
      >
        <el-form
          ref="rePasswordFormData"
          :model="rePasswordFormData"
          :rules="rePasswordFormDataRules"
          label-width="80px"
        >
          <el-form-item label="旧密码" prop="old_password">
            <el-input
              type="password"
              v-model="rePasswordFormData.old_password"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password">
            <el-input
              type="password"
              v-model="rePasswordFormData.password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="ver_password">
            <el-input
              type="password"
              v-model="rePasswordFormData.ver_password"
            ></el-input>
          </el-form-item>
          <div
            class="dialog-footer"
            style="display: flex; justify-content: flex-end"
          >
            <el-button
              @click="
                $refs.rePasswordFormData.resetFields();
                rePasswordVisible = false;
              "
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="rePasswordSubmit('rePasswordFormData')"
              >确 定</el-button
            >
          </div>
        </el-form>
      </el-dialog>

      <!-- ==========================修改密码弹窗========================== -->

      <el-aside
        class="aside"
        width="null"
        style="width: 250px; z-index: 100; overflow-y: scroll"
        :class="{ have: isCollapse }"
      >
        <div class="header" v-if="!isCollapse">
          <i>
            <img src="@/assets/img/logo.png" alt />
          </i>
          <span>公路工程建设项目</span>
          <span>管理系统</span>
        </div>
        <div class="user-home" v-if="!isCollapse">
          <el-dropdown
            trigger="click"
            style="width: 100%"
            @command="handleCommand"
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                cursor: pointer;
              "
            >
              <div class="d-flex">
                <div class="user-img">
                  <i class="d-center">
                    <img src="@/assets/img/user22.png" style alt />
                  </i>
                </div>
                <div class="user-name">
                  <span>{{ account }}</span>
                  <span style="font-size: 12px; color: #7d8b9c">欢迎登录</span>
                </div>
              </div>

              <span class="el-dropdown-link">
                <i
                  class="el-icon-arrow-down el-icon-more"
                  style="display: flex; align-items: center"
                ></i>
              </span>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
              <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="tit d-center" v-if="isCollapse">
          <img
            src="@/assets/img/logo.png"
            style="width: 40px; height: 40px"
            alt
          />
        </div>

        <el-menu
          router
          active-text-color="#67B2FF"
          background-color="#304156"
          text-color="#BFCBD9"
          :default-active="router"
          style="color: #bfcbd9; z-index: 100"
          width="null"
          :class="{ 'el-menu--collapse': isCollapse }"
          :collapse="isCollapse"
          collapse-transition
        >
          <!-- collapse-transition -->
          <el-menu-item
            index="/home"
            class="d-start notSlide"
            :class="{
              home_active: $route.path == '/home' && !isCollapse,
              el_home: $route.path == '/home' && isCollapse,
            }"
          >
            <i
              class="el-icon-s-home"
              :class="{ 'home-color': $route.path == '/home' && !isCollapse }"
            ></i>
            <span
              :class="{ 'home-color': $route.path == '/home' && !isCollapse }"
              >首页</span
            >
          </el-menu-item>

          <el-submenu index="/basic" v-if="$systemMenu['基础信息管理']">
            <template slot="title" class="asd">
              <i class="el-icon-s-management"></i>
              <span>基础信息管理</span>
            </template>
            <el-menu-item
              index="/basic/ProjectLibrary"
              style="padding-left: 60px"
              v-if="$systemMenu['项目库']"
            >
              <template slot="title">
                <span>项目库</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/basic/EnterpriseLibrary"
              style="padding-left: 60px"
              v-if="$systemMenu['企业库']"
            >
              <template slot="title">
                <span>企业库</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/basic/EnterprisePersonnelBase"
              style="padding-left: 60px"
              v-if="$systemMenu['企业人员库']"
            >
              <template slot="title">
                <span>企业人员库</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-submenu
            index="/progress"
            @select="select"
            v-if="$systemMenu['前期工作管理']"
            :class="{ 'is-active': btn == 'DetailWork' }"
          >
            <template slot="title" class="d-end">
              <i class="el-icon-s-platform"></i>
              <span>前期工作管理</span>
            </template>

            <el-menu-item
              index="/progress/ProgressWork"
              style="padding-left: 63px"
              v-if="$systemMenu['前期工作进展']"
            >
              <span>前期工作进展</span>
            </el-menu-item>
            <div
              v-for="(items, index) in item"
              :key="index"
              class="submenu d-start"
              style="padding-left: 63px"
              @click="select(items)"
            >
              <span
                :class="{ 'active-home': router == items.index }"
                class="d-start"
                >{{ items.value }}</span
              >
              <!-- || (highLight && selectRoute == items.index) -->
            </div>
          </el-submenu>
          <el-submenu index="Jurisdiction" v-if="$systemMenu['权限管理']">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item
              index="/jurisdiction/user"
              style="padding-left: 60px"
              v-if="$systemMenu['用户']"
            >
              <template slot="title">
                <span>用户</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/jurisdiction/menu"
              style="padding-left: 60px"
              v-if="$systemMenu['菜单']"
            >
              <template slot="title">
                <span>菜单</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/jurisdiction/role"
              style="padding-left: 60px"
              v-if="$systemMenu['角色']"
            >
              <template slot="title">
                <span>角色</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/jurisdiction/structure"
              style="padding-left: 60px"
              v-if="$systemMenu['组织架构']"
            >
              <template slot="title">
                <span>组织架构</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="system" v-if="$systemMenu['系统管理']">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item
              index="/system/systemLog"
              style="padding-left: 60px"
              v-if="$systemMenu['系统日志']"
            >
              <template slot="title">
                <span>系统日志</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/system/dictionary"
              style="padding-left: 60px"
              v-if="$systemMenu['数据字典']"
            >
              <template slot="title">
                <span>数据字典</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="homeManagement" v-if="$systemMenu['消息管理']">
            <template slot="title">
              <i class="el-icon-message-solid"></i>
              <span>消息管理</span>
            </template>
            <el-menu-item
              index="/homemanagement/notice"
              style="padding-left: 60px"
              v-if="$systemMenu['通知公告']"
            >
              <template slot="title">
                <span>通知公告</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/homemanagement/documents"
              style="padding-left: 60px"
              v-if="$systemMenu['收发文']"
            >
              <template slot="title">
                <span>收发文</span>
              </template>
            </el-menu-item>
            <!-- <el-menu-item
              index="/homemanagement/Brief"
              style="padding-left:60px;"
              v-if="$systemMenu['项目简报']"
            >
              <template slot="title">
                <span>项目简报</span>
              </template>
            </el-menu-item>-->
          </el-submenu>
          <el-submenu index="ThinkTank" v-if="$systemMenu['智库管理']">
            <template slot="title">
              <i class="el-icon-s-opportunity"></i>
              <span>智库管理</span>
            </template>
            <el-menu-item
              index="/ThinkTank/classification"
              style="padding-left: 60px"
              v-if="$systemMenu['智库分类管理']"
            >
              <template slot="title">
                <span>智库分类管理</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="/ThinkTank/ThinkTankDocuments"
              style="padding-left: 60px"
              v-if="$systemMenu['智库文章管理']"
            >
              <template slot="title">
                <span>智库文章管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <el-menu
          background-color="#304156"
          text-color="#BFCBD9"
          style="color: #bfcbd9; z-index: 100"
          width="null"
          v-if="!isCollapse"
        >
          <!-- :collapse="isCollapse" -->
          <!-- :class="{'el-menu--collapse':isCollapse}" -->
          <el-submenu
            index="ThinkTanksssss"
            :class="{ 'is-active': false }"
            collapse-transition
          >
            <template slot="title">
              <i class="el-icon-s-shop"></i>
              <span>工程管理</span>
            </template>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>费用管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>计量支付</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>进度管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>质量管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>安全管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>环保管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>履约管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>视频监控管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="padding-left: 60px">
              <template slot="title">
                <span>工程内业管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-menu-item class="d-start notSlide">
            <i class="el-icon-s-platform"></i>
            <span>交竣工管理</span>
          </el-menu-item>
          <el-menu-item class="d-start notSlide">
            <i class="el-icon-menu"></i>
            <span>工程档案管理</span>
          </el-menu-item>
          <el-menu-item class="d-start notSlide">
            <i class="el-icon-s-grid"></i>
            <span>查询分析</span>
          </el-menu-item>
          <el-menu-item class="d-start notSlide">
            <i class="el-icon-s-data"></i>
            <span>BIM应用</span>
          </el-menu-item>
          <el-menu-item class="d-start notSlide">
            <i class="el-icon-s-finance"></i>
            <span>AI智能应用</span>
          </el-menu-item>
          <el-menu-item class="d-start notSlide">
            <i class="el-icon-s-management"></i>
            <span>大数据应用</span>
          </el-menu-item>
          <el-menu-item class="d-start notSlide">
            <i class="el-icon-s-ticket"></i>
            <span>智能感知管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- </div> -->
      <el-container style="position: relative" width="null">
        <transition name="home_list">
          <div
            class="selectCompany"
            :class="{ translate_company: show }"
            v-loading="loading"
            v-if="btn == 'DetailWork' || btnShow"
          >
            <div class="searchs">
              <div style="margin-bottom: 10px" class="d-center">
                <div class="d-start">
                  <span style="font-size: 12px">项目名称：</span>
                </div>
                <div class="d-end">
                  <el-input
                    class="inline-input"
                    v-model="name"
                    placeholder="请输入内容"
                    size="small"
                    style="width: 205px"
                  ></el-input>
                </div>
              </div>
              <div style="margin-bottom: 10px" class="d-center">
                <div class="d-start">
                  <span style="font-size: 12px">项目状态：</span>
                </div>
                <div class="d-end">
                  <el-select
                    size="small"
                    v-model="active"
                    placeholder="请选择"
                    style="width: 205px"
                  >
                    <el-option value="未开工">未开工</el-option>
                    <el-option value="新建">新建</el-option>
                    <el-option value="续建">续建</el-option>
                    <el-option value="交工">交工</el-option>
                    <el-option value="竣工">竣工</el-option>
                  </el-select>
                </div>
              </div>
              <div style="margin: 0 0 10px 10px">
                <div class="d-start btn">
                  <el-button
                    size="small"
                    class="s"
                    type="primary"
                    @click="page=1;search();"
                    >查询</el-button
                  >
                  <el-button
                    class="c"
                    size="small"
                    type="button"
                    plain
                    style="color:#333 !important"
                    @click="
                      active = null;
                      name = null;
                      page=1;
                      search();
                    "
                    >重置</el-button
                  >
                </div>
              </div>
            </div>
            <!-- <div class="d-end"></div> -->
            <div class="mian-list" ref="table">
              <div class="noResult" v-if="!productList.length">没有更多了</div>
              <div
                class="produce-list"
                v-for="(item, index) in productList"
                :key="index"
                @click="RouterTo(item)"
              >
                <div class="list-h xmmc">
                  <span style="background: #e4ecfd; color: #4a8dfc">{{
                    item.xmzt
                  }}</span>
                  <!-- <span
                    v-if="item.xmzt == '交工'"
                    style="background: #fdf4e4; color: #fe8e16"
                    >{{ item.xmzt }}</span
                  >
                  <span
                    v-if="item.xmzt == '新建'"
                    style="background: #dcfbe0; color: #3cc24c"
                    >{{ item.xmzt }}</span
                  >
                  <span
                    v-if="item.xmzt == '续建'"
                    style="background: #fde4e4; color: #ee4b47"
                    >{{ item.xmzt }}</span
                  >
                  <span
                    v-if="item.xmzt == '竣工'"
                    style="background: #e4ecfd; color: #4a8dfc"
                    >{{ item.xmzt }}</span
                  > -->
                  {{ item.xmmc }}
                </div>
                <div class="list-m d-start" style="margin-bottom: 5px">
                  <span
                    v-if="item.lxbm"
                    style="margin-right: 10px"
                    :title="item.lxbm"
                    >{{ item.lxbm }}</span
                  >
                  <i style="color: #666; font-style: normal"
                    >总里程:{{ item.wujl }}km</i
                  >
                </div>
                <!-- <div class="list-f" v-if="item.lxmc">{{item.lxmc}}</div> -->
                <div class="list-f d-between">
                  <span>{{ progressName }}</span>
                  <span v-if="typeof item[progressData] == 'number'">{{
                    item[progressData]
                  }}</span>
                  <span v-else-if="progressData == 'qq_yjblids'">{{
                    Object.values(item[progressData]).length
                  }}</span>
                  <PatternsSmall
                    :iconShow="verification(item[progressData])"
                    v-else
                  />
                </div>
              </div>
            </div>
            <el-pagination
              :pager-count="5"
              background
              layout="prev, pager, next"
              :current-page="page"
              :total="total"
              class="d-center"
              style="margin-top: 10px"
              :page-size="pageSize"
              @current-change="handleCurrentChange"
            ></el-pagination>
            <div
              class="show"
              @click="show = !show"
              v-if="btn == 'DetailWork' || btnShow"
              :class="{ before: !show, after: show }"
            ></div>
          </div>
        </transition>

        <el-header class="d-start" style="height: 50px; background: #fff">
          <!-- <span class="title">公路工程建设项目管理系统</span> -->
          <div class="main-header d-center" @click="tabCol">
            <i class="el-icon-s-unfold" v-if="isCollapse"></i>
            <i class="el-icon-s-fold" v-else></i>
          </div>
          <el-breadcrumb separator="/" style="margin-left: 10px">
            <el-breadcrumb-item
              v-for="(item, index) in BreadcrumbData"
              :key="index"
              >{{ item.meta.title }}</el-breadcrumb-item
            >
            <!-- :to="{ name: index == BreadcrumbData.length?item.name:'' }" -->
          </el-breadcrumb>
          <div class="icon-header d-center">
            <!-- 用户名下拉菜单 -->
            <el-dropdown class="d-center" @command="handleCommand">
              <div class="user-avator d-center">
                <i class="d-center" style="width: 25px; height: 25px">
                  <img
                    src="@/assets/img/user22.png"
                    style="width: 25px; height: 25px"
                    alt
                  />
                </i>
                <!-- :size="30" -->
                <span style="padding: 0 10px">{{ account }}</span>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
                <el-dropdown-item command="rePassword"
                  >修改密码</el-dropdown-item
                >
                <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <Tags />
        <el-main
          :class="is_qp ? 'homes' : ''"
          style="
            height: calc(100% - 50px);
            overflow-x: hidden;
            background: #f2f3f7;
          "
        >
          <!-- <div class="d-around" style="height:40px;"> -->
          <!-- <i class="el-icon-s-fold" @click="isCollapse1 = !isCollapse1"></i> -->
          <!-- <el-button >按钮</el-button> -->
          <!-- </div> -->

          <transition name="query_list" mode="out-in">
            <keep-alive include="homeMap">
              <router-view
                :nameMeta="$route.path"
                v-if="$route.meta.keepAlive"
              ></router-view>
              <router-view
                :nameMeta="$route.path"
                v-else
                :key="key"
              ></router-view>
            </keep-alive>
          </transition>
        </el-main>
      </el-container>
    </el-container>
    <botify />
  </div>
</template>

<script>
// @ is an alias to /src
import Tags from "@/components/layout/Tags.vue";
import botify from "@/components/opacity";
import PatternsSmall from "@/components/patternsSmall";
import store from "@/store";

export default {
  name: "Home",
  components: {
    Tags,
    botify,
    PatternsSmall,
  },
  data() {
    return {
      store,
      is_qp: false,
      isCollapse: false,
      btnShow: false,
      highLight: false,
      total: 0,
      pageSize: 10,
      page: 1,
      loading: false,
      routeList: [
        {
          value: "可行性研究",
          index: "/progress/DetailWork/ADetailsStudy",
        },
        {
          value: "初步设计",
          index: "/progress/DetailWork/BDesign",
        },
        {
          value: "施工图设计",
          index: "/progress/DetailWork/CPlans",
        },
        {
          value: "要件办理",
          index: "/progress/DetailWork/DRequirements",
        },
        {
          value: "标段管理",
          index: "/progress/DetailWork/ELot",
        },
        {
          value: "技术服务单位",
          index: "/progress/DetailWork/FService",
        },
        {
          value: "第三方检测",
          index: "/progress/DetailWork/GParty",
        },
        {
          value: "合同管理",
          index: "/progress/DetailWork/HContract",
        },
        {
          value: "监督手续",
          index: "/progress/DetailWork/IPermit",
        },
        {
          value: "施工许可",
          index: "/progress/DetailWork/JTechnology",
        },
        // {
        //   value: "施工进场",
        //   index: "/progress/DetailWork/Kmobilization"
        // }
      ],
      show: true,
      name: "",
      active: "",
      BreadcrumbData: [],
      productList: [],
      items: {},
      selectRoute: "",
      selectBtn: false, //判断是不是点击了menu 点击一次触发一次 触发后必须在点击才可以触发
      logoutVisible: false, //退出登录提示弹窗
      rePasswordVisible: false, //修改密码弹窗
      rePasswordFormData: {
        password: "",
        ver_password: "",
        old_password: "",
      }, //修改密码提交对象
      rePasswordFormDataRules: {
        password: [
          { required: true, message: "请填写新密码", trigger: "blur" },
        ],
        ver_password: [{ required: true, message: "请填写确认密码" }],
        old_password: [{ required: true, message: "请填写旧密码" }],
      },
      userInfoVisible: false, //个人信息
      account: null,
    };
  },
  methods: {
    rePasswordDialogClose() {
      this.$refs.rePasswordFormData.resetFields();
      this.rePasswordVisible = false;
    },
    storage(key) {
      return window.localStorage.getItem(key);
    },
    //修改密码
    rePasswordSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$post("/api/users/editpass", this.rePasswordFormData).then(
            (res) => {
              this.$message({
                message: res.msg,
                type: res.state,
              });
              if (res.code == 200) {
                this.logout();
              }
            }
          );
        }
      });
    },
    handleCurrentChange(value) {
      this.page = value;
      this.search();
    },
    select(items) {
      this.show = false;
      this.btnShow = true;
      this.highLight = true;
      this.selectRoute = items.index;
      this.selectBtn = true;
      this.search();
      this.items = items;
    },
    handleCommand(command) {
      if (command == "loginOut") {
        this.logoutVisible = true;
        // this.logout();
      } else if (command == "rePassword") {
        this.rePasswordVisible = true;
      } else if (command == "userInfo") {
        this.userInfoVisible = true;
      }
    },
    verification(item) {
      if (item.toString() == "green") {
        return 1;
      }
      if (item.toString() == "red") {
        return 2;
      }
      if (item.toString() == "white") {
        return 3;
      }
      if (item.toString() == "true") {
        return 4;
      }
      if (item.toString() == "false") {
        return 5;
      }
    },
    logout() {
      window.localStorage.removeItem("userid");
      window.localStorage.removeItem("token");
      this.$router.push("/login");
    },
    search() {
      this.loading = true;
  console.log(this.page);
      this.$get("/api/Qq/index", {
        xmmc: this.name,
        xmzt: this.active,
        page: this.page,
      }).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.productList = res.data.list;
        }
        if (this.$refs.table) this.$refs.table.scrollTop = 0;
        this.loading = false;
      });
    },
    RouterTo(item) {
      this.highLight = false;
      window.localStorage.query = JSON.stringify({
        xm_id: item.id,
        xmmc: item.xmmc,
        xmzt: item.xmzt,
        is_sealed: item.is_sealed,
      });
      if (this.btn == "DetailWork" && !this.selectBtn) {
        //如果在前期工作管理的10项里那么就把query数据换了
        this.$router.push({
          path: this.$route.path,
          query: {
            xm_id: item.id,
            xmmc: item.xmmc,
            xmzt: item.xmzt,
            is_sealed: item.is_sealed,
          },
        });
      } else {
        this.$router.push({
          path: this.items.index,
          query: {
            xm_id: item.id,
            xmmc: item.xmmc,
            xmzt: item.xmzt,
            is_sealed: item.is_sealed,
          },
        });
      }
      this.selectBtn = false;
      setTimeout(() => {
        this.$forceUpdate();
      }, 300);
    },
    tabCol() {
      this.isCollapse = !this.isCollapse;
    },
    getaccount() {
      this.account = window.localStorage.account;
    },
  },
  computed: {
    router() {
      return this.$route.path;
    },
    btn() {
      return this.$route.path.split("/")[2];
    },
    item() {
      return this.routeList.filter((v) => {
        return this.$systemMenu[v.value];
      });
    },

    key() {
      return this.$route.path + Math.random();
    },
    progressName() {
      // return this.btn == "DetailWork"
      // ? this.$route.meta.title
      // :
      if (this.btn == "DetailWork" && !this.selectBtn) {
        return this.$route.meta.title;
      } else {
        return this.items.value;
      }
    },
    routeName() {
      return this.$route.meta.name;
    },
    progressData() {
      let routeName = this.routeName;
      if (this.btn == "DetailWork" && !this.selectBtn) {
        return routeName == "ADetailsStudy"
          ? "qq_kxxyj"
          : routeName == "BDesign"
          ? "qq_cbsj"
          : routeName == "CPlans"
          ? "qq_sgtsj"
          : routeName == "DRequirements"
          ? "qq_yjblids"
          : routeName == "ELot"
          ? "qq_bdgl"
          : routeName == "FService"
          ? "qq_jsfwdw"
          : routeName == "GParty"
          ? "qq_dsfjc"
          : routeName == "HContract"
          ? "qq_htgl"
          : routeName == "IPermit"
          ? "qq_jdsx"
          : routeName == "JTechnology"
          ? "qq_sgxk"
          : null;
      } else {
        let indexName = this.items.index.split("/")[3];
        return indexName == "ADetailsStudy"
          ? "qq_kxxyj"
          : indexName == "BDesign"
          ? "qq_cbsj"
          : indexName == "CPlans"
          ? "qq_sgtsj"
          : indexName == "DRequirements"
          ? "qq_yjblids"
          : indexName == "ELot"
          ? "qq_bdgl"
          : indexName == "FService"
          ? "qq_jsfwdw"
          : indexName == "GParty"
          ? "qq_dsfjc"
          : indexName == "HContract"
          ? "qq_htgl"
          : indexName == "IPermit"
          ? "qq_jdsx"
          : indexName == "JTechnology"
          ? "qq_sgxk"
          : null;
        // return this.items.value;
      }
    },
  },
  watch: {
    "store.state.iswinds": function () {
      this.is_qp = this.store.state.iswinds;
    },
    btn(news) {
      if (news != "DetailWork") {
        this.show = true;
        this.btnShow = false;
        this.highLight = false;
      }
    },

    $route(news) {
      // account

      if (news.path == "/home") {
        // console.log(1);
        this.getaccount();
      }
      this.BreadcrumbData = news.matched.filter((v) => {
        return v.meta.name;
      });
      this.selectBtn = false;
    },
  },
  mounted() {
    this.BreadcrumbData = this.$route.matched.filter((v) => {
      return v.meta.name;
    });
    this.search();
    this.getaccount();
  },
};
</script>
<style lang="less">
.produce-list {
  .list-f {
    .d-center {
      width: 15px;
      height: 15px;
    }
    i {
      width: 15px;
      height: 15px;
    }
  }
}
.el-popper {
  z-index: 9999 !important;
}
</style>
<style lang="less" scoped>
.notSlide {
  margin: 0 14px;
  height: 45px;
  i {
    color: #bfcbd9;
  }
}
.user-label {
  width: 100px;
  display: inline-block;
  text-align: right;
  margin-bottom: 20px;
  margin-right: 20px;
}
.d-flex {
  display: flex;
  align-items: center;
}
.home {
  width: 100%;
  height: 100%;
  position: relative;
  .el-submenu .el-menu-item {
    height: 40px;
    line-height: 40px;
  }
  .el-menu li {
    margin-top: 10px;
    border-radius: 5px;
  }

  .el-submenu__title i {
    color: #bfcbd9;
  }
  .title {
    font-size: 26px;
  }
  .active-home {
    color: #409eff !important;
  }
  .submenu {
    width: 100%;
    height: 40px;
    font-size: 14px;
    background: #304156;
    color: rgb(191, 203, 217);
    cursor: pointer;
    margin-top: 10px;
    // margin: 0 14px !important;
  }
  .submenu:hover {
    background: #253445 !important;
  }
  .selectCompany {
    width: 320px;
    height: 100%;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    transition: all 0.5s;
    box-shadow: 0px 0px 5px 0px rgba(2, 40, 97, 0.6);
    padding: 10px 0;
    .searchs {
      background: #f1f3f7;
      border-radius: 10px;
      padding: 15px 11px 5px;
      margin-left: 10px;
      margin-right: 10px;
      .btn {
        justify-content: center;
      }
      .s {
        width: 70px;
        height: 32px;
        background: #3f9dff;
        border-radius: 4px;
        border: 1px solid #3f9dff;
        font-size: 13px;
        color: #fff;
        margin-right: 7px;
        cursor: pointer;
      }
      .c {
        width: 70px;
        height: 32px;
        background: #f3f3f5;
        border: 1px solid #dbdfe5;
        font-size: 13px;
        border-radius: 4px;
        margin-left: 7px;
        cursor: pointer;
      }
    }
    .show {
      text-align: right;
      right: -16px;
      width: 16px;
      height: 48px;
      background: #409eff;
      position: absolute;
      top: calc(50% - 24px);
      border-radius: 0px 8px 8px 0px;
      cursor: pointer;
    }
    .after {
      &::after {
        content: "";
        width: 9px;
        height: 9px;
        position: absolute;
        top: calc(50% - 7.5px);
        left: -2px;
        transform: rotate(45deg);
        border: 2px solid;
        border-color: #fff #fff transparent transparent;
      }
    }
    .before {
      &::before {
        content: "";
        width: 9px;
        height: 9px;
        position: absolute;
        top: calc(50% - 7.5px);
        left: 5.5px;
        transform: rotate(45deg);
        border: 2px solid;
        border-color: transparent transparent #fff #fff;
      }
    }
  }
  .translate_company {
    transform: translateX(-100%);
  }
  .main-header {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    cursor: pointer;
    // background: #ccc;
    opacity: 1;
    &:hover {
      opacity: 0.7;
    }
  }
  .mian-list {
    width: 100%;
    height: calc(100% - 190px);
    overflow-y: scroll;
    padding: 0 10px;
  }
  .produce-list {
    width: calc(100%);
    // margin: 10px 0;
    // border-radius: 5px;
    border-bottom: 1px dashed #ddd;
    cursor: pointer;
    padding: 10px 0;
    font-size: 12px;

    .list-h {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
      span {
        font-size: 12px;
        padding: 0 10px;
        color: #e6bd2cfa;
        background: #eccb2961;
        border-radius: 3px;
      }
    }
    .xmmc {
      padding-left: 50px;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      span {
        position: absolute;
        left: 0;
        top: 0;
        height: 20px;
        line-height: 20px;
      }
    }
    .list-m {
      height: 33%;
      width: 100%;
      overflow: hidden;

      span {
        font-size: 14px bold;
        padding: 0 10px;
        color: white;
        background: #409eff;
        border-radius: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 50%;
      }
    }
    .list-f {
      height: 33%;
      color: #ccc;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .aside {
    // width: 250px !important;
    height: 100%;
    background: #304156;
    display: flex;
    // justify-content: center;
    // align-items: center;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s ease-in;
    position: relative;
  }
  .have {
    width: 64px !important;
    overflow: hidden !important;
  }
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
    flex-shrink: 0;

    i {
      width: 41px;
      height: 41px;
      margin-bottom: 16px;
      img {
        width: 41px;
        height: 41px;
      }
    }
    span {
      font-size: 16px;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 25px;
    }
  }
  .user-home {
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 34px;
    height: 71px;
    border-top: 1px solid #37485e;
    border-bottom: 1px solid #37485e;
    flex-shrink: 0;
    i {
      margin-right: 10px;
      width: 35px;
      height: 35px;
      img {
        width: 35px;
        height: 35px;
      }
    }
    span {
      font-size: 14px;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
      font-weight: 400;
      text-align: left;
      color: #bfcbd9;
      margin-bottom: 3px;
    }
    .user-name {
      height: 35px;
      display: flex;
      justify-content: space-between;
      align-items: space-between;
      flex-direction: column;
      i {
        font-size: 12px;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI-Regular;
        font-weight: 400;
        text-align: left;
        color: #7a8ca2;
      }
    }
  }
  .tit {
    width: 100%;
    height: 64px;
  }
  .notify {
    width: 115px;
    height: 35px;
    background: #409eff;
    border-radius: 4px;
    margin-right: 18px;
    cursor: pointer;
  }
  .receive {
    width: 115px;
    height: 35px;
    background: #48d15f;
    border-radius: 4px;
    margin-right: 18px;
    position: relative;
    em {
      width: 8px;
      height: 8px;
      background: red;
      border-radius: 50%;
      position: absolute;
      top: -4px;
      right: -4px;
    }
  }
  .home_active {
    flex-shrink: 0;
    margin: 0 14px;
    background-color: #409eff !important;
    height: 45px;
    border-radius: 5px;
    font-size: 14px;
    color: #303133;
    padding: 10px 20px !important;
    cursor: pointer;
    // transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    box-sizing: border-box;
  }
  .home-color {
    color: white;
  }
  .el_home {
    margin: 0 14px !important;
    padding: 10px 20px !important;
    background-color: #409eff !important;
    border-radius: 5px;
    height: 50px !important;
    i:before {
      color: #ffffff;
    }
  }
}
.noResult {
  color: #999;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  text-align: left;
  margin-bottom: 20px;
  margin-right: 20px;
  width: 80%;
}
.jjh {
  position: absolute;
  left: 3px;
  top: 141px;
  width: 35px;
  height: 35px;
  background: #fff;
  z-index: 90;
  border: 1px #ddd solid;
  border-radius: 5px;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  line-height: 53px;
  text-align: center;
  cursor: pointer;
  img {
    width: 30px;
  }
}
.homes {
  position: fixed;
  width: 100%;
  height: 100% !important;
  left: 0;
  top: 0;
  z-index: 9999;
  .jjh {
    top: 53px;
  }
}
</style>
